<template>
  <div class="setting-container">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="top"
    >
      <el-form-item
        label="审批名称"
        prop="flowName"
      >
        <el-input
          v-model="formData.flowName"
          placeholder="请输入审批名称"
          clearable
          :style="{width: '100%'}"
        />
      </el-form-item>
      <el-form-item
        label="审批类型"
        prop="flowGroup"
      >
        <el-select
          v-model="formData.flowGroup"
          placeholder="请选择审批类型"
          clearable
          :style="{width: '100%'}"
        >
          <el-option
            v-for="(item, index) in flowGroupOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="谁可以发起审批" prop="approver">-->
      <!--        <fc-org-select-->
      <!--          ref="org-select"-->
      <!--          v-model="formData.initiator"-->
      <!--          :tabList="['dep&user']"-->
      <!--          title="发起人"-->
      <!--          @change="emitInitiator" />-->
      <!--          <span style="font-size: 12px; color: #aaa;">默认所有人</span>-->
      <!--      </el-form-item>-->
      <el-form-item
        label="审批说明"
        prop="flowRemark"
      >
        <el-input
          v-model="formData.flowRemark"
          type="textarea"
          placeholder="请输入审批说明"
          :maxlength="100"
          show-word-limit
          :autosize="{minRows: 4, maxRows: 4}"
          :style="{width: '100%'}"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from 'vue';
import {Form, FormItem, Input, Option, Select} from 'element-ui';

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Select);
Vue.use(Input);
Vue.use(Option);
/**
 * 基础设置面板
 * @author maolin
 */
export default {
  name: "BasicSetting",
  components: {},
  props: {
    /**
     * tab名称
     * @public
     */
    tabName: {
      type: String,
      default: ''
    },
    /**
     * 初始化对象
     * @public
     */
    initiator: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 配置对象
     * @public
     */
    conf: {
      type: Object,
      default () {
        return {};
      }
    },
  },
  data() {
    // const req = require.context( '@/assets/approverIcon', false, /\.png$/ )
    // const iconList = req.keys().map((t, idx) => ({src: req(t), id: idx}))
    return {
      dialogVisible: false,
      formData: {
        flowName: '',
        flowGroup: undefined,
        flowRemark: undefined
      },
      rules: {
        flowName: [{
          required: true,
          message: '请输入审批名称',
          trigger: 'blur'
        }],
        flowGroup: [{
          required: true,
          message: '请选择审批类型',
          trigger: 'change'
        }],
      },
      flowGroupOptions: [{
        "label": "采购管理",
        "value": 1
      }, {
        "label": "销售管理",
        "value": 2
      }]
    };
  },
  computed: {
  },
  watch:{
    initiator:{
      handler (val) {
        this.formData.initiator = val;
      },
      immediate: true
    }
  },
  created() {
    if (typeof this.conf === 'object' && this.conf !== null) {
      Object.assign(this.formData, this.conf);
    }
  },
  methods: {
    /**
     * 通知父组件初始化配置改变
     * @public
     */
    emitInitiator(){
      this.$nextTick(()=>{
        this.$emit('initiator-change', this.formData.initiator, this.$refs['org-select'].selectedLabels);
      });
    },
    /**
     * 给父级页面提供得获取本页数据得方法
     * @public
     */
    getData() {
      return new Promise((resolve, reject) => {
        this.$refs['elForm'].validate(valid => {
          if (!valid) {
            reject({ target: this.tabName});
            return;
          }
          this.formData.flowImg = this.activeIcon;
          resolve({ formData: this.formData, target: this.tabName});  // TODO 提交表单
        });
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.icon-item{
  width:40px;
  height:40px;
  margin: 6px;
  position:relative;
  cursor:pointer;
  opacity:.5;
  &.active{
    opacity:1;
  }
  &:hover{
    opacity:1;
  }
}

.setting-container{
  width: 600px;
  height: 100%;
  margin: auto;
  background: white;
  padding: 16px;

  >>>.el-form--label-top .el-form-item__label{
    padding-bottom: 0;
  }
}
</style>>

